<template>
  <div class="config-index">
    <div class="header-search-box shadow">
      <sec-form
        :searchBox="{ span: 8 }"
        :span="6"
        :ruleForm="searchForm.data"
        :formData="searchForm.config"
        :optionData="searchForm.optionData"
        @reset="fatchData(true)"
        @submitForm="fatchData(true)"
      >
      </sec-form>
    </div>
    <div class="scene-main tab-scene-main">
      <div class="new-file">
        <el-button v-if="admin" type="primary" icon="el-icon-plus" @click="handleNew">新建</el-button>
      </div>

      <sec-table
        :loading="searchTable.loading"
        :tableData="searchTable.rows"
        :tableCol="searchTable.cols"
        ref="secTabel"
      >
        <template v-slot:operation="data">
          <!-- v-if="data.data.row.admin==1" -->
          <el-button v-if="admin" @click.native.prevent="handleEdit(data.data.row.id)" type="text"> 编辑</el-button>
          <el-button v-if="admin" @click.native.prevent="handleDel(data.data.row.id)" type="text"> 删除</el-button>
        </template>
      </sec-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import secForm from "components/formValidate/myForm";
import secTable from "components/table/comTable";
import { paginationMixin } from "common/js/mixin";
import { sceneListAPI } from "api/configApi.js";
export default {
  props: {},
  mixins: [paginationMixin],
  components: {
    secForm,
    secTable,
  },
  data() {
    return {
      admin: true,
      /**
       * 查询区域
       */
      searchForm: {
        optionData: {
          question: [],
        },
        /**
         * 查询表单数据
         */
        data: {
          question: "",
          modifyTime: "",
        },
        /**
         * 查询表单配置
         */
        config: [
          {
            type: "select",
            clearable: true,
            filterable: true,
            label: "场景类型",
            prop: "question",
          },
          // { type: "select", filterable: true, clearable: true, label: "场景类型", prop: "question", option: this.$store.state.dictionary[101005] },
          { type: "datetimerange", span: 10, clearable: true, label: "更新时间", prop: "modifyTime" },
        ],
      },

      /***
       * 列表区域
       */
      searchTable: {
        //加载中
        loading: false,
        /***
         * 表格列
         */
        cols: [
          // { type: "selection", width: 60, align: "center" },
          { label: "场景类型ID", prop: "id", align: "center", width: 120 },
          {
            label: "场景类型",
            prop: "question",
            align: "center",
            showOverflowTooltip: true,
          },

          {
            label: "创建人",
            prop: "creator",
            align: "center",
            // width: 150,
            showOverflowTooltip: true,
          },
          {
            label: "创建时间",
            prop: "createTime",
            align: "center",
            width: 170,
            showOverflowTooltip: true,
          },
          {
            label: "更新人",
            prop: "operator",
            align: "center",
            width: 100,
            showOverflowTooltip: true,
          },
          {
            label: "更新时间",
            prop: "modifyTime",
            align: "center",
            width: 170,
            showOverflowTooltip: true,
          },
          {
            label: "操作",
            fixed: "right",
            columnType: "slot",
            prop: "operation",
            width: 200,
          },
        ],
        /**
         * 表格数据
         */
        rows: [],
      },

      //批量操作弹框
      opDialogVisible: false,

      // 编辑时需要的数据
      editData: {},
    };
  },
  computed: {},
  watch: {},
  async mounted() {
    this.admin = this.utils.admin();
    this.searchForm.optionData.question = await this.$store.dispatch("config/sceneTypeOption", {
      pageSize: 1000,
      pageNum: 1,
    });
    await this.fatchData();
  },
  methods: {
    //获取数据
    async fatchData(paginationReset) {
      //解决点击搜索或者重置的时候 改成第一页
      if (paginationReset) {
        this.paginationReset();
      }
      this.searchTable.loading = true;
      let { question, modifyTime } = this.searchForm.data;
      sceneListAPI({
        pageNum: this.page,
        pageSize: this.pageSize,
        modifyTimeStart: modifyTime[0] || "",
        modifyTimeEnd: modifyTime[1] || "",
        id: question,
      }).then((res) => {
        this.searchTable.loading = false;
        this.searchTable.rows = res.data;
        this.totalSize = res.count;
      });
    },

    // 每页显示N条
    async handleSizeChange(e) {
      this.pageSize = e;
      await this.fatchData();
    },
    //当前页改变
    async handleCurrentChange(e) {
      this.page = e;
      await this.fatchData();
    },

    // 新建
    handleNew() {
      this.$router.push({
        path: "/config/scenemanage/sceneform",
        query: {},
      });
    },

    // 编辑
    handleEdit(id) {
      this.$router.push({
        path: "/config/scenemanage/sceneform",
        query: {
          id: id,
        },
      });
    },
    // 删除
    handleDel(id) {
      this.$confirm("此操作不可恢复, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$store.dispatch("config/sceneDelete", { id: id });
          let state = this.message.state(res);
          if (!state) return;
          await this.fatchData();
          this.searchForm.optionData.question = await this.$store.dispatch("config/sceneTypeOption", {
            pageSize: 1000,
            pageNum: 1,
          });
        })
        .catch((e) => {});
    },
  },
};
</script>
<style lang="scss">
.config-index {
  .btn-table-op {
    text-align: right;
    margin: 0 0 10px 0;
  }
}
</style>
